<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr" data-zw="zhouwen"
         style="color:orange;font-size:25px"
    >Hello Element</div>
    <div id="content">
    </div>
  </div>
</body>
<script>
  /*1.Element类型定义
   *  a.Element 表示XML或HTML元素，对外暴露出访问元素标签名、子节点和属性的能力。其父节点为document或者是element
   *  b.Element类型节点的特点
   *    1.nodeType 等于 1；
   *    2.nodeName 值为元素的标签名；
   *    3.nodeValue 值为 null；
   *    4.parentNode 值为 Document 或 Element 对象；
   *    5.子节点可以是 Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference 类型。
   */

   /*2.nodeName,tagName属性
    *  a.可以通过 nodeName 或 tagName 属性来获取元素的标签名。这两个属性返回同样的值（添加后一个属性明显是为了不让人误会）。
    *  b.在 HTML 中，元素标签名始终以全大写表示(也就是通过nodeName，tagName获取的标签名都为大写)；在 XML（包括 XHTML）中，标签名
    *    始终与源代码中的大小写一致。如果不确定脚本是在 HTML 文档还是 XML 文档中运行，最好将标签名转换为小写形式，以便于比较：
    */
    function checkedTagName(){
      let dom = document.getElementById('app');
      console.log(dom.nodeName);//DIV
      console.log(dom.tagName);//DIV
      console.log(dom.nodeName === dom.tagName);//true
      if(dom.tagName.toLowerCase() === 'div')
      console.log('Hello TagName');//Hello TagName
    }
    // checkedTagName();

    /*3.HTML 元素
     *  a.所有 HTML 元素都通过 HTMLElement 类型表示，包括其直接实例和间接实例。另外，HTMLElement直接继承 Element 并增加了一些属性。每个属性都对应下列属性之一，它们是所有 HTML 元素上都有的标准属性（也就是所有的HTML元素都具备这些属性）
     *    1.id，元素在文档中的唯一标识符；
     *    2.title，包含元素的额外信息，通常以提示条形式展示；
     *    3.lang，元素内容的语言代码（很少用）；
     *    4.dir，语言的书写方向（"ltr"表示从左到右，"rtl"表示从右到左，同样很少用）；
     *    5.className，相当于 class 属性，用于指定元素的 CSS 类（因为 class 是 ECMAScript 关键字，所以不能直接用这个名字）。
     *
     */
     function checkedHtml(){
       let dom = document.getElementById('myDiv');
       //1.获取HTML元素基本属性值
       console.log('id',dom.id);//myDiv
       console.log('title',dom.title); //Body text
       console.log('lang',dom.lang);//en
       console.log('dir',dom.dir);//ltr
       console.log('className',dom.className);//bd
       //2.直接修改HTML元素基本属性值
       dom.id = 'modify_myDiv';
       dom.title = 'modify_Body text';
       dom.lang = 'zh-en';
       dom.dir = 'rtl';
       dom.className = 'modify_bd';
     }
    //  checkedHtml();

    /*4.HTML元素的属性操作-获取属性
     *  a.每个元素都有零个或多个属性，通常用于为元素或其内容附加更多信息。
     *  b.与属性相关的 DOM 方法主要有 3 个：getAttribute()、setAttribute()和 removeAttribute()。
     *  c.这些方法主要用于操纵属性，包括在 HTMLElement 类型上定义的属性。
     *  d.传给 getAttribute()的属性名与它们实际的属性名是一样的，因此这里要传"class"而非"className"（className 是作为对象属性
     *    时才那么拼写的）。如果给定的属性不存在，则 getAttribute()返回 null。
     *  f.getAttribute()方法也能取得不是 HTML 语言正式属性的自定义属性的值。（也就是自定义属性的值）
     *  g.属性名不区分大小写，因此"ID"和"id"被认为是同一个属性。另外，根据 HTML5 规范的要求，自定义属性名应该前缀 data-以方便验证。
     *  h.元素的所有属性也可以通过相应 DOM 元素对象的属性来取得。当然，这包括 HTMLElement 上定义的直接映射对应属性的 5 个属性，还有
     *    所有公认（非自定义）的属性也会被添加为 DOM 对象的属性。(HTML元素上自定义的属性将不会视作DOM元素对象的属性)
     *  i.通过 DOM 对象访问的属性中有两个返回的值跟使用 getAttribute()取得的值不一样。
     *     1.style 属性:这个属性用于为元素设定 CSS 样式。在使用 getAttribute()访问 style 属性时，返回的是 CSS 字符串。而在通
     *       过DOM 对象的属性访问时，style 属性返回的是一个（CSSStyleDeclaration）对象。DOM 对象的 style 属性用于以编程方式读
     *       写元素样式，因此不会直接映射为元素中 style 属性的字符串值。（在实际中动态改变样式属性，需要采用这种方式）
     *     2.事件处理程序（或者事件属性），比如 onclick。在元素上使用事件属性时（比如 onclick），属性的值是一段 JavaScript 代码。
     *       如果使用 getAttribute()访问事件属性，则返回的是字符串形式的源代码。而通过 DOM 对象的属性访问事件属性时返回的则是一个 
     *       JavaScript函数（未指定该属性则返回 null）。这是因为 onclick 及其他事件属性是可以接受函数作为值的。
     *     3.考虑到以上差异，开发者在进行DOM编程时通常会放弃使用getAttribute()而只使用对象属性。getAttribute()主要用于取得自定义属性的值。
     */
     function checkedOperateAttribute(){
       let dom = document.getElementById('myDiv');
       //1.获取HTML元素上直接已经定义的属性
       console.log("dom.getAttribute('title')",dom.getAttribute('title'));//Body text
       //2.获取HTML元素上自定义的属性
       console.log("dom.getAttribute('data-zw')",dom.getAttribute('data-zw'));//zhouwen
       //3.自定义元素不会被视作DOM元素对象的属性
       console.log("dom['data-zw']",dom['data-zw']);//undefined
       //4.style属性在作为DOM的属性的获取值与getAttribute()的获取值的区别
       console.log(dom.style);//CSSStyleDeclaration {}
       console.log(dom.getAttribute('style'));//color:orange;font-size:25px
     }
    //  checkedOperateAttribute();

    /**5.HTML元素的属性操作-设置属性
     *   a.getAttribute()配套的方法是 setAttribute()，这个方法接收两个参数：要设置的属性名和属性的值。
     *   b.如果属性已经存在，则 setAttribute()会以指定的值替换原来的值；如果属性不存在，则 setAttribute()会以指定的值创建该属性。
     *   c.setAttribute()适用于 HTML 属性，也适用于自定义属性。另外，使用 setAttribute()方法设置的属性名会规范为小写形式，因此"ID"会变成"id"。
     *   d.元素属性也是 DOM 对象属性，所以直接给 DOM 对象的属性赋值也可以设置元素属性的值。
     *   e.注意，在 DOM 对象上添加自定义属性,不会自动让它变成元素的属性。
     *   f.removeAttribute()用于从元素中删除属性。这样不单单是清除属性的值，而是会把整个属性完全从元素中去掉。
     * **/
     function checkedSetAttribute(){
       //1.获取元素节点
       let dom = document.getElementById('content');
       //2.测试setAttribute添加dom原生属性
       dom.setAttribute('class','my-class');
       //3.测试setAttribute添加dom原生属性名大小写
       dom.setAttribute('TITLE','hello title');
       //4.测试直接添加DOM对象属性
       dom.lang = 'zh-en';
       dom.id = 'modify_content';
       //5.测试在 DOM 对象上添加自定义属性,不会自动让它变成元素的属性。
       dom.myColor = 'modify_color';
       console.log(dom.getAttribute('myColor'));//null
       console.log(dom.myColor);//modify_color
       //6.测试removeAttribute();
       dom.removeAttribute('class');
     }
    //  checkedSetAttribute();
</script>
</html>
